<template>
    <div>
      <!--头部 开始-->
      <header class="fix">
        <a href="javascript:history.go(-1);" class="returnBtn"></a>
        动态详情
      </header>
      <!--头部 结束-->
      <!--中间 开始-->
      <main>
        <div class="personalHome dynamic">
          <div class="infoContent pb20">
            <div class="infoHead">
              <div class="infoHeadLeft">
                <div class="headPic"><img src="../../images/temporary/7.jpg"></div>
                <div class="headName">
                  <p>环球小荐人</p>
                  <em>12小时前发布</em>
                </div>
              </div>
              <div class="follow">
                <a href="javascript:void(0);" class="infoHeadRight">...</a>
                <a href="javascript:void(0);" class="followBtn">+ 关注</a>
              </div>
            </div>
            <div class="infoText">
              <div class="textTitle">
                <em>置顶</em>
                <h3>法式轻奢ELLE箱包专场</h3>
              </div>
              <p>法式轻奢ELLE箱包专场，会员最高可省92.7元！霍思燕同款斜挎包会员价679.9元，牛皮百搭斜挎包会员价223.7元，U型开口斜挎包会员价298.5元，精致简约铆钉小方包会员价276元，快来进场为自己挑选一只心仪的包包吧~</p>
            </div>
            <!--缩略图-->
            <div id="_contain" class="enlargementPic">
              <div class="contain">
                <div class="containContent">
                  <div class="text">
                    <div class="my-gallery" data-pswp-uid="2">
                      <figure>
                        <div><a href="../../images/temporary/5.jpg" data-size="200x200"><img  src="../../images/temporary/5.jpg" preview="1"></a></div>
                      </figure>
                      <figure>
                        <div><a href="../../images/temporary/sb1.jpg" data-size="640x426"><img src="../../images/temporary/sb1.jpg" preview="1"></a></div>
                      </figure>
                      <figure>
                        <div><a href="../../images/temporary/s5.jpg" data-size="286x220"><img src="../../images/temporary/s5.jpg" preview="1"></a></div>
                      </figure>
                      <figure>
                        <div><a href="../../images/temporary/2.jpg" data-size="288x296"><img  src="../../images/temporary/2.jpg" preview="1"></a></div>
                      </figure>
                      <figure>
                        <div><a href="../../images/temporary/sb3.jpg" data-size="768x1024"><img src="../../images/temporary/sb3.jpg" preview="1"></a></div>
                      </figure>
                      <figure>
                        <div><a href="../../images/temporary/sb1.jpg" data-size="640x426"><img src="../../images/temporary/sb1.jpg" preview="1"></a></div>
                      </figure>
                      <figure>
                        <div><a href="../../images/temporary/sb1.jpg" data-size="640x426"><img  src="../../images/temporary/sb1.jpg" preview="1"></a></div>
                      </figure>
                      <figure>
                        <div><a href="../../images/temporary/sb1.jpg" data-size="640x426"><img src="../../images/temporary/sb1.jpg" preview="1"></a></div>
                      </figure>
                      <figure>
                        <div><a href="../../images/temporary/sb1.jpg" data-size="640x426"><img src="../../images/temporary/sb1.jpg" preview="1"></a></div>
                      </figure>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="secialField">
              <a href="#">
                <div class="secialPic"><img src="../../images/temporary/2.jpg"></div>
                <p>法式轻奢ELLE箱包专场</p>
              </a>
            </div>
          </div>
          <div class="fabulousNum">
            <div class="numLeft"><em>6</em>人点赞</div>
            <div class="numRight">
              <span><img src="../../images/temporary/7.jpg"></span>
              <span><img src="../../images/temporary/7.jpg"></span>
              <span><img src="../../images/temporary/7.jpg"></span>
              <span><img src="../../images/temporary/7.jpg"></span>
              <span><img src="../../images/temporary/7.jpg"></span>
              <span><img src="../../images/temporary/7.jpg"></span>
            </div>
          </div>
          <div class="bottomOperation">
            <a href="#"><em class="fabulous"></em><span>6</span></a>
            <a href="#"><em class="download"></em><span>下载</span></a>
            <a href="#"><em class="share"></em><span>15</span></a>
          </div>
          <a href="javascript:void(0)" class="relevantBtn">1个相关商品</a>
        </div>
      </main>
      <!--中间 结束-->
      <!--缩略图点开大图 开始 -->
      <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>
        <div class="pswp__scroll-wrap">
          <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
          </div>
          <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
              <div class="pswp__counter"></div>
              <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
              <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
              <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
              <div class="pswp__preloader">
                <div class="pswp__preloader__icn">
                  <div class="pswp__preloader__cut">
                    <div class="pswp__preloader__donut"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
              <div class="pswp__share-tooltip"></div>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
              <div class="pswp__caption__center"></div>
            </div>
          </div>
        </div>
      </div>
      <!--缩略图点开大图 结束 -->
      <!--弹层 开始-->
      <div class="elasticBox">
        <div class="blackBag"></div>
        <div class="boxContent">
          <div class="boxMain">
            <div class="boxTitle">1个相关商品</div>
            <div class="boxInfo">
              <div class="boxInfoLeft"><a href="#"><img src="../../images/temporary/2.jpg"></a></div>
              <div class="boxInfoRight">
                <h3><a href="#">【99元任选6杯】爱茜茜里意大利榛子巧克力味冰淇淋</a></h3>
                <div class="priceIfon">
                  <div class="priceNum">
                    <span class="news">￥<em>63</em>.48</span>
                    <span class="used">￥69</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--弹层 结束-->
    </div>
</template>

<script>
import {TouchSlide} from "../../js/plugins/TouchSlide.1.1.min.js"
import Swiper from 'swiper'
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
    export default {
      name: "dynamicDetails",
      methods:{
        commodity:function (){
        $(".dynamic .relevantBtn").on("click",function(){
          $("body").css({"height":"100%","overflow":"hidden"})
          $(".elasticBox").show();
        });
        $(".elasticBox .blackBag").on("click",function(){
          $("body").css({"height":"auto","overflow":"auto"})
          $(".elasticBox").hide();
        })
      }
      },
      components:{
        TouchSlide,
        Swiper,
        preview
      },
      mounted: function () {
        this.commodity()
      }
    }
</script>

<style scoped>

@import "../../css/common/common.css";
@import "../../css/plugins/swiper.min.css";
@import "../../css/other/index.css" ;
</style>
